<template>
  <div>
    <el-row>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>HPC</el-breadcrumb-item>
          <el-breadcrumb-item>资源总表</el-breadcrumb-item>
        </el-breadcrumb>
    </el-row>

    <el-card class="box-card">
      <!-- HPC信息区域 -->
      <el-row :gutter="10">
          <el-col :span="3">
            <el-select placeholder="请选择" v-model="searchCondition" :disabled="true">
            </el-select>
        </el-col>
        <el-col :span="6">
            <el-input placeholder="请输入内容" :clearable="true" :disabled="true">
                <el-button slot="append" icon="el-icon-search" :disabled="true"></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="addResource">添加资源表</el-button>
        </el-col>
        <el-col :span="1" :push="7">
            <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
        <el-col :span="2" :push="8">
            <el-button type="danger" @click="removeVisible = true">批量删除</el-button>
        </el-col>
	    </el-row>

    <el-table :data="hpclist" :border='false' stripe @selection-change="selsChange" 
                :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="胖节点总数" show-overflow-tooltip>
            <template slot-scope="scope">
                <div>{{scope.row.fatNode}}</div>
            </template>
        </el-table-column>
        <el-table-column label="CPU节点总数">
            <template slot-scope="scope">
                <div>{{scope.row.cpu}}</div>
            </template>
        </el-table-column>
        <el-table-column label="存储总量">
            <template slot-scope="scope">
                <div>{{scope.row.storage}}</div>
            </template>
        </el-table-column>
        <el-table-column label="GPU节点">
            <template slot-scope="scope">
                <div>{{scope.row.gpu}}</div>
            </template>
        </el-table-column>
        <el-table-column label="可用胖节点总数">
            <template slot-scope="scope">
                <div>{{scope.row.availableNode}}</div>
            </template>
        </el-table-column>
        <el-table-column label="可用CPU节点总数">
            <template slot-scope="scope">
                <div>{{scope.row.availableCpu}}</div>
            </template>
        </el-table-column>
        <el-table-column label="可用存储总量">
            <template slot-scope="scope">
                <div>{{scope.row.availableStorage}}</div>
            </template>
        </el-table-column>
         <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
                <el-button type="primary" size="small" plain @click="modify(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="queryInfo.pagenum" :page-sizes="[10,50,100]" :page-size="queryInfo.pagesize" :total="total"
			        layout="total, sizes, prev, pager, next, jumper" background >
			</el-pagination>
    </el-card>

    <add-resource ref="AddResource" @fetchData="getList"></add-resource>
    <modify-resource ref="ModifyResource" :message="tableInfo" @fetchData="getList"></modify-resource>

    <el-dialog title="提示" :visible.sync="removeVisible" width="30%">
        <span>确定删除吗？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="removeVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import AddResource from './components/AddResource';
import ContractDialog from './components/ContractDialog';
import ModifyResource from './components/ModifyResource';
// import AddHpc from './components/AddHpc'
export default {
  data() {
    return {
      searchCondition: '',
      activeName: '1',
      queryInfo: {
        pagenum: 1,
        pagesize: 2,
      },
      hpclist: [
      ],
      total: 0,
      tableInfo: {},
      addbtn: '添加HPC',
      removeVisible: false
    };
  },
  created() {
      this.getList();
  },
  components: {
    ContractDialog,
    AddResource,
    ModifyResource,
    // AddHpc,
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
    },
    addResource(){
        this.$refs['AddResource'].isShow = true;
    },
    async modify(row) {
        const { data: res } = await this.$http.get(`hpcresource/${row.id}`);
            if (res.code !== 200) {
                return this.$message.error("获取数据失败！");
            }
            console.log('tet', res);
            this.tableInfo = res
        this.$refs['ModifyResource'].show();
    },
    async getList() {
      const { data: res } = await this.$http.get("hpcresource/list");
      if (res.code !== 200) {
        return this.$message.error("获取数据失败！");
      }
      this.total = res.data.totalPage;
      this.queryInfo.pagenum = res.data.currPage;
      this.queryInfo.pagesize = res.data.pageSize;
      this.hpclist = res.data.list;
      // this.total = 2;
      // this.queryInfo.pagenum = 1;
      // this.queryInfo.pagesize = 10;
      let newTime = new Date();
      for(let i = 0; i < this.hpclist.length; i++){
          if(this.hpclist[i].userType == '包节点'){
              if( newTime > this.hpclist[i].contractEndTime){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }else{
              if( this.hpclist[i].surplusCpu <= 0 ){
                  this.hpclist[i].status = false;
              }else{
                  this.hpclist[i].status = true;
              }
          }
      }
      console.log(this.hpclist);
    },
    selsChange(sels) { 
    this.sels = sels;
    },
    async remove(row) {
      let ids = [];
      row.forEach(element => {
        ids.push(element.id)
      });
      const { data: res } = await this.$http.delete("hpcresource", {data:ids});
      if (res.code !== 200) {
        return this.$message.error("操作失败！");
      }
      this.getList()
    },
    removeConfirm() {
        this.remove(this.sels)
        this.removeVisible = false
    },
    exportExcel() {
      window.open('http://222.240.49.66:11501/api/hpcresource/export','数据')
    }
  },
};
</script>

<style lang="less" scoped>
</style>